<template>
  <div id="toolbar-placeholder">
    <div id="toolbar-box">
      <JsonImport title="导入" style="display:inline-block" @data-update="$emit('data-update', $event)" />
      <JsonExport :data-export="data" />
      <el-button
        v-for="tool in toolTable"
        :key="tool.name"
        :title="tool.name"
        :icon="tool.icon"
        @click="tool.clickEvent"></el-button>
    </div>
  </div>
</template>

<script>
import JsonExport from './components/jsonExport.vue'
import JsonImport from './components/JsonImport.vue'
export default {
  components: {
    JsonImport: JsonImport,
    JsonExport: JsonExport
  },
  props: {
    data: {
      type: Object,
      require: true
    }
  },
  data: function () {
    return {
      toolTable: [{
        name: '清空',
        icon: 'el-icon-delete-solid',
        clickEvent: this.clear
      }]
    }
  },
  methods: {
    clear () {
      this.$emit('data-clear', true)
    },
    backout () {

    },
    redo () {

    }
  }
}
</script>